<template>
    <Container>
        <Sprite :texture="mapImg" :y="mapY1"></Sprite>
        <Sprite :texture="mapImg" :y="mapY2"></Sprite>
    </Container>
</template>

<script>
import {ref, onMounted, onUnmounted} from "vue";
import { game } from "../game";
import mapImg from "../assets/mapImg.png"

export default {
    name: "GamePage.vue",
    setup() {
        const {mapY1, mapY2} = useMove();
        return {
            mapImg,
            mapY1,
            mapY2,
        }
    }
};

function useMove(){
    const gameHeight = 1080;
    const mapY1 = ref(0);
    const mapY2 = ref(-gameHeight);

    const speed = 10;

    function handleTicker() {
        mapY1.value += speed;
        mapY2.value += speed;

        if (mapY1.value >= gameHeight) {
            mapY1.value = -gameHeight;
        }
        if (mapY2.value >= gameHeight) {
            mapY2.value = -gameHeight;
        }
    }

    onMounted(() => {
        game.ticker.add(handleTicker);
    })
    onUnmounted(() => {
        game.ticker.remove(handleTicker);
    })

    return {
        mapY1,
        mapY2,
    }
}

</script>

<style scoped>

</style>
